<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网 - 淘！我喜欢</title>
    <!-- chorm浏览器好像可以自行识别icon -->
    <!-- <link rel="icon" href="favicon.ico"> -->
    <!-- <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 根基目录 -->
    <!-- <base target="_blank"> -->
    
</head>
<body>

    <!-- 头部信息 -->
    <div id="headMessage" class="clearfix layer">
        <!-- 左侧 -->
        <ul class="fl">
            <li>
                <span>中国大陆</span>
                <span class="iconfont icon-xiajiantou arrow"></span>
            </li>
            <li class="mr7">
                <a href="" class="login mr7">亲，请登录</a>
                <a href="">免费登录</a>
            </li>
            <li>
                <a href="">手机逛淘宝</a>
            </li>
        </ul>
        <!-- 右侧 -->
        <ul class="fr">
            <li>
                <a href="">我的淘宝</a>
                <span class="iconfont icon-xiajiantou arrow"></span>
            </li>
            <li>
                <span class="iconfont icon-gouwuche2 mr5 c4"></span>
                <a href="">购物车</a>
                <strong>0</strong>
                <span class="iconfont"></span>
            </li>
            <li>
                <a href="" >
                    <span class="iconfont icon-shoucang mr5 store"></span>
                    收藏夹
                </a>
                <span class="iconfont icon-xiajiantou arrow"></span>
            </li>
            <li>
                <a href="">商品分类</a>
            </li>
            <li class="line">
                |
            </li>
            <li>
                <a href="">千牛卖家中心</a>
                <span class="iconfont"></span>
            </li>
            <li>
                <a href="">联系客服</a>
                <span class="iconfont icon-xiajiantou arrow"></span>
            </li>
            <li>
                <span class="iconfont icon-caidan c4 mr5"></span>
                <a href="">网站导航</a>
                <span class="iconfont icon-xiajiantou arrow"></span>
            </li>
        </ul>
    </div>

    <!-- 头部广告 -->
    <div id="headAd">
        <div class="layer clearfix">
            <!-- 左边 -->
            <a href="" class="fl go">
                <img src="images/go.png" alt="">
            </a>
            <!-- 右边 -->
            <ul class="fr">
                <li class="item1">
                    <a href="" class="fr"><img src="./images/adimg_01.jpg" alt=""></a>
                    <h3><a href="">电视会场</a></h3>
                    <p><a href="">最高降2000</a></p>
                </li>
                <li class="item2">
                    <a href="" class="fr"><img src="./images/adimg_02.jpg" alt=""></a>
                    <h3><a href="">电视会场</a></h3>
                    <p><a href="">最高降2000</a></p>
                </li>
                <li class="item3">
                    <a href="" class="fr"><img src="./images/adimg_03.jpg" alt=""></a>
                    <h3><a href="">电视会场</a></h3>
                    <p><a href="">最高降2000</a></p>
                </li>
                <li class="item4">
                    <a href="" class="fr"><img src="./images/adimg_04.jpg" alt=""></a>
                    <h3><a href="">电视会场</a></h3>
                    <p><a href="">最高降2000</a></p>
                </li>
                <li class="item5">
                    <a href="" class="fr"><img src="./images/adimg_05.jpg" alt=""></a>
                    <h3><a href="">电视会场</a></h3>
                    <p><a href="">最高降2000</a></p>
                </li>
            </ul>
        </div>
    </div>

    <!-- 头部搜索 -->
    <div id="headSearch">
        <div class="clearfix layer">
            <!-- 大图标 -->
            <h1 class="fl"><a href="">淘宝网</a></h1>
            <!-- 右侧二维码 -->
            <div class="code fr">
                <span class="iconfont icon-guanbi close"></span>
                <span class="c5">手机淘宝</span>
                <img src="/images/code.png" alt="">
            </div>
            <!-- 搜索框 -->
            <div class="search">
                <!-- 上 -->
                <ul class="searchTap clearfix">
                    <li class="active">宝贝</li>
                    <li>天猫</li>
                    <li>店铺</li>
                </ul>
                <!-- 中 -->
                <div class="searchContent clearfix">
                    <form action="">
                        <div class="searchBox fl">
                            <input type="text">
                            <div class="placeholder">
                                <i class="iconfont icon-sousuo"></i>
                                <span>网红裤腰带 洋气 国际范 9.9包邮</span>
                            </div>
                            <span class="imgSearch iconfont icon-paizhao"></span>
                        </div>
                        <div class="btn fl">
                            <button type="submit">搜索</button>
                        </div>
                    </form>
                </div>
                <!-- 下 -->
                <div class="hotKey">
                    <a href="" class="c5">新款连衣裙</a>
                    <a href="">四件套</a>
                    <a href=""class="c5">潮流T恤</a>
                    <a href="">时尚女鞋</a>
                    <a href=""class="c5">短裤</a>
                    <a href="">半身裙</a>
                    <a href="">男士外套</a>
                    <a href="">墙纸</a>
                    <a href="">行车记录仪</a>
                    <a href="">新款男鞋</a>
                    <a href="">耳机</a>
                    <a href="">时尚女包</a>
                    <a href="">沙发</a>
                </div>
            </div>

        </div>
    </div>

    <!-- 导航 -->
    <div id="nav" class="layer clearfix">
        <!-- 主题市场 -->
        <h2 class="fl">主题市场</h2>
        <!-- 右侧 -->
        <ul >
            <li class="size"><a href="#">天猫</a></li>
            <li class="size"><a href="#">聚划算</a></li>
            <li class="size"><a href="#">天猫超市</a></li>
            <li class="line">|</li>
            <li><a href="#">淘抢购</a></li>
            <li><a href="#">电器城</a></li>
            <li><a href="#">司法拍卖</a></li>
            <li><a href="#">淘宝心选</a></li>
            <li><a href="#">兴农扶贫</a></li>
            <li class="line">|</li>
            <li><a href="#">飞猪旅行</a></li>
            <li><a href="#">智能生活</a></li>
            <li><a href="#">苏宁易购</a></li>
        </ul>
    </div>

    <!-- 首屏内容 -->
    <div id="firstScreem" class="layer clearfix">
        <!-- 左边 -->
        <div class="firstLeft fl">
            <!-- 侧边导航 -->
            <div class="sideNav fl">
                <ul>
                    <li>
                        <a href="">女装</a> / <a href="">男装</a> / <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li>
                    <li>
                        <a href="">箱包</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">童装玩具</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">家电</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">美妆</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">珠宝</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">运动</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">游戏</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">美食</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">女装</a> / 
                        <a href="">二手车</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">女装</a> / 
                        <a href="">男装</a> / 
                        <a href="">DIY</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">女装</a> / 
                        <a href="">男装</a> / 
                        <a href="">本地服务</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">女装</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">女装</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">女装</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li><li>
                        <a href="">女装</a> / 
                        <a href="">男装</a> / 
                        <a href="">内衣</a><span class="iconfont icon-youjiantou fr"></span>
                    </li>
                </ul>
            </div>
            <!-- 图片1容器 -->
            <div class="img1Box fr">
                <div class="pic fl">
                    <div class="img">
                        <a href=""><img src="/images/pic_01.jpg" alt=""></a>
                    </div>

                    <button class="iconfont leftButton icon-zuojiantou"></button>
                    <button class="iconfont rightButton icon-youjiantou"></button>
                    
                    <div class="circle">
                        <span class="active"></span><span></span><span></span><span></span><span></span>
                    </div>
                </div>

                <div class="ad fr">
                    <a href=""><img src="/images/ad_02.jpg" alt=""></a>
                </div>
            </div>
            <!-- 图片2容器 -->
            <div class="img2Box fr">
                <div class="pic fl">
                    <div class="picTitle">
                        <div class="text clearfix">
                            <span class="fl bg">理想生活上天猫</span>
                            <span class="fr "><i>1</i>/6</span>
                        </div>
                        <div class="line">
                            <span></span>
                        </div>
                    </div>

                    <div class="img">
                        <a href=""><img src="/images/pic_02.jpg" alt=""></a><a href=""><img src="/images/pic_03.jpg" alt=""></a>
                    </div>

                    <button class="iconfont leftButton icon-zuojiantou"></button>
                    <button class="iconfont rightButton icon-youjiantou"></button>
                </div>

                <div class="ad fr">
                    <p class="title">今日特卖</p>
                    <a href=""><img src="/images/ad_03.jpg" alt=""></a>
                </div>
            </div>
            <!-- 淘宝头条 -->
            <div class="news fl">
                <div class="hd fl">
                    <h3>淘宝头条</h3>
                    <p>让您的生活更有趣</p>
                </div>
                <div class="newList fr">
                    <div class="item">
                        <a href="#" class="img fl"><img src="/images/news_img_01.jpg" alt=""></a>
                        <h4><a href="">未满将访谈第三期：炒米恩公阿道夫进阿里和！</a></h4>
                        <p><a href="">嘎斯的地方看哈的法国航空技术关键看啊大家非公开及时的反馈打分结果很快就发动了攻击客户了</a></p>
                        <a href="" class="more">更多</a>
                    </div>
                </div>
            </div>
            
        </div>

        <!-- 右边 -->
        <div class="firstRight fr">
            <!-- 用户 -->
            <div class="user">
                <a href="" class="avatar"><img src="/images/avatar.jpg" alt=""></a>
                <p class="username">Hi! 你好</p>
                <p class="members">
                    <a href="" class="gold">领淘金币抵钱</a>
                    <a href="" class="club">会员俱乐部</a>
                </p>
                <div class="button">
                    <button class="login">登录</buttun>
                    <button class="register">注册</button>
                    <button class="shop">开店</buttun>
                </div>
            </div>
            <!-- 举报 -->
            <a href="" class="tipOff">
                <span>网上有害信息举报专区</span><i class="iconfont icon-yousanjiaoxing"></i>
            </a>
            <!-- 公告区 -->
            <div class="notice">
                <ul class="title">
                    <li class="active"><a href="#">公告</a></li>
                    <li><a href="#">规则</a></li>
                    <li><a href="#">论坛</a></li>
                    <li><a href="#">安全</a></li>
                    <li><a href="#">公益</a></li>
                </ul>
                <ul class="content clearfix">
                    <li class="item1"><a href="#">天猫618进入热身 84个品牌在天猫共获得粉丝4.3亿</a></li>
                    <li><a href="#">天猫618五折卖车</a></li>
                    <li><a href="#">天猫618直播观看指南</a></li>
                </ul>
            </div>

            <!-- 图标区域 -->
            <table class="icon">
                <tr>
                    <td class="item1">
                        <a href="">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="item2">
                        <a href="">
                            <span></span>
                            <i>旅行</i>
                        </a>
                    </td>
                    <td class="item3">
                        <a href="">
                            <span></span>
                            <i>水电煤</i>
                        </a>
                    </td>
                    <td class="item4">
                        <a href="">
                            <span></span>
                            <i>火车票</i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="item1">
                        <a href="">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="item2">
                        <a href="">
                            <span></span>
                            <i>旅行</i>
                        </a>
                    </td>
                    <td class="item3">
                        <a href="">
                            <span></span>
                            <i>水电煤</i>
                        </a>
                    </td>
                    <td class="item4">
                        <a href="">
                            <span></span>
                            <i>火车票</i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td class="item1">
                        <a href="">
                            <span></span>
                            <i>充话费</i>
                        </a>
                    </td>
                    <td class="item2">
                        <a href="">
                            <span></span>
                            <i>旅行</i>
                        </a>
                    </td>
                    <td class="item3">
                        <a href="">
                            <span></span>
                            <i>水电煤</i>
                        </a>
                    </td>
                    <td class="item4">
                        <a href="">
                            <span></span>
                            <i>火车票</i>
                        </a>
                    </td>
                </tr>
            </table>

            <!-- APP -->
            <div class="app">
                <div class="title clearfix">
                    <h3 class="fl">阿里APP</h3>
                    <a href="" class="fr iconfont icon-youjiantou"></a>
                    <a href="" class="fr more">更多</a>
                </div>
                <ul class="appicon">
                    <li><a href=""><img src="/images/app_01.png" alt=""></a></li>
                    <li><a href=""><img src="/images/app_02.png" alt=""></a></li>
                    <li><a href=""><img src="/images/app_03.png" alt=""></a></li>
                    <li><a href=""><img src="/images/app_04.png" alt=""></a></li>
                    <li><a href=""><img src="/images/app_05.png" alt=""></a></li>
                    <li><a href=""><img src="/images/app_06.png" alt=""></a></li>
                    <li><a href=""><img src="/images/app_07.jpg" alt=""></a></li>
                    <li><a href=""><img src="/images/app_08.png" alt=""></a></li>
                    <li><a href=""><img src="/images/app_09.png" alt=""></a></li>
                    <li><a href=""><img src="/images/app_10.png" alt=""></a></li>
                </ul>
            </div>
        </div>

    </div>

    <!-- 有好货and爱逛街 -->
    <div id="Goods" class="layer clearfix mt10">
        <!-- 有好货 -->
        <div class="goods fl">
            <div class="head clearfix">
                <h3 class="fl">
                    <img src="/images/goods.png" alt="有好货">
                    <span class="iconfont icon-erweima"></span>
                    <i>与品质生活不期而遇</i>
                </h3>
                <a href="" class="fr change">换一换</a>
            </div>

            <ul class="list">
                <li>
                    <a href=""><img src="/images/shop_img_01.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text"><a href="">《破产姐妹》max超爱的Tarte</a></p>
                    <a href="" class="commit">
                    <span class="iconfont icon-xiaolian"></span><i>5950人说好</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_02.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text"><a href="">《破产姐妹》max超爱的Tarte</a></p>
                    <a href="" class="commit">
                    <span class="iconfont icon-xiaolian"></span><i>5950人说好</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_03.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text"><a href="">《破产姐妹》max超爱的Tarte</a></p>
                    <a href="" class="commit">
                    <span class="iconfont icon-xiaolian"></span><i>5950人说好</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_04.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text"><a href="">《破产姐妹》max超爱的Tarte</a></p>
                    <a href="" class="commit">
                    <span class="iconfont icon-xiaolian"></span><i>5950人说好</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_05.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text"><a href="">《破产姐妹》max超爱的Tarte</a></p>
                    <a href="" class="commit">
                    <span class="iconfont icon-xiaolian"></span><i>5950人说好</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_06.jpg" alt=""></a>
                    <h4><a href="">max破产都要买的口红</a></h4>
                    <p class="text"><a href="">《破产姐妹》max超爱的Tarte</a></p>
                    <a href="" class="commit">
                    <span class="iconfont icon-xiaolian"></span><i>5950人说好</i>
                    </a>
                </li>
            </ul>
        
        </div>

        <!-- 爱逛街 -->
        <div class="goods fr shooping">
            <div class="head clearfix">
                <h3 class="fl">
                    <img src="/images/shopping.png" alt="有好货">
                    <span class="iconfont icon-erweima"></span>
                    <i>献给聪明可爱的你</i>
                </h3>
                <a href="" class="fr change">换一换</a>
            </div>

            <ul class="list">
                <li>
                    <a href=""><img src="/images/shop_img_07.jpg" alt=""></a>
                    <p class="text">
                        <span class="iconfont icon-quotation"></span>
                        <a href="">《破产姐妹》max超爱的阿斯顿尽快发给大家发克利夫感觉地方。刚看到房价更加简单概括零零发公司的福利</a></p>
                    <a href="" class="commit">
                    <span><img src="/images/small_avatar.png" alt=""></span><i>xxxxxx网名</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_08.jpg" alt=""></a>
                    <p class="text">
                        <span class="iconfont icon-quotation"></span>
                        <a href="">《破产姐妹》max超爱的阿斯顿尽快发给大家发克利夫感觉地方。刚看到房价更加简单概括零零发公司的福利</a></p>
                    <a href="" class="commit">
                    <span><img src="/images/small_avatar.png" alt=""></span><i>xxxxxx网名</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_09.jpg" alt=""></a>
                    <p class="text">
                        <span class="iconfont icon-quotation"></span>
                        <a href="">《破产姐妹》max超爱的阿斯顿尽快发给大家发克利夫感觉地方。刚看到房价更加简单概括零零发公司的福利</a></p>
                    <a href="" class="commit">
                    <span><img src="/images/small_avatar.png" alt=""></span><i>xxxxxx网名</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_10.jpg" alt=""></a>
                    <p class="text">
                        <span class="iconfont icon-quotation"></span>
                        <a href="">《破产姐妹》max超爱的阿斯顿尽快发给大家发克利夫感觉地方。刚看到房价更加简单概括零零发公司的福利</a></p>
                    <a href="" class="commit">
                    <span><img src="/images/small_avatar.png" alt=""></span><i>xxxxxx网名</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_11.jpg" alt=""></a>
                    <p class="text">
                        <span class="iconfont icon-quotation"></span>
                        <a href="">《破产姐妹》max超爱的阿斯顿尽快发给大家发克利夫感觉地方。刚看到房价更加简单概括零零发公司的福利</a></p>
                    <a href="" class="commit">
                    <span><img src="/images/small_avatar.png" alt=""></span><i>xxxxxx网名</i>
                    </a>
                </li>
                <li>
                    <a href=""><img src="/images/shop_img_12.jpg" alt=""></a>
                    <p class="text">
                        <span class="iconfont icon-quotation"></span>
                        <a href="">《破产姐妹》max超爱的阿斯顿尽快发给大家发克利夫感觉地方。刚看到房价更加简单概括零零发公司的福利</a></p>
                    <a href="" class="commit">
                    <span><img src="/images/small_avatar.png" alt=""></span><i>xxxxxx网名</i>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 右侧固定导航 -->
    <div id="tool">
        <span class="iconfont icon-taogongzi1"></span>
        <div class="btn">
            <a href="" class="c4 active">爱逛 好货</a>
            <a href="" class="c5">好店 直播</a>
            <a href="" class="c6">品种 特色</a>
            <a href="" class="c7">实惠 热卖</a>
            <a href="" class="c4">猜你 喜欢</a>
            <a href="" class="item6">反馈</a>
            <a href="" class="">暴恐 举报</a>
        </div>
    </div>
    <script src="/js/index.js"></script>
</body>
</html>